<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>v-if案例</title>

    <script src="D:\ApplicationFiles\vscode\chapter_three\VUE框架\vue\vue.js"></script>

</head>

<body>
    <div id="app">

        <!-- 用来判断,类似于java的if else if else,判断成立就显示不成立就不显示 -->
        <p v-if="person.age>=18">成年人</p>
        <p v-if="person.age<18">未成年人</p>

        <p v-if="person.salary>=2000">金领</p>
        <p v-else-if="person.salary>=1000">白领</p>
        <p v-else>屌丝</p>

        <!-- 和v-if一样也可以判断,只是条件不满足也会在页面加载,不显示而已 -->
        <p v-show="person.age>=20">成年人</p>
    </div>

    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    address: "北京",
                    name: "张三",
                    age: 20,
                    person: {
                        name: "jack",
                        age: 18,
                        salary: 1100
                    },
                    hobby: ["唱", "跳", "rap"],
                    url: "http://act.codeboy.com/"
                }
            }
        });
    </script>

</body>

</html>